<template>
  <div class="wrapper">
    <div class="title-wrapper">
      <div class="bigTitle">数据对比</div>
    </div>
    <div style="text-align: right">
      <time-picker class="cus-wrapper" ref="timeRef" @change="handleChange"/>
    </div>
    <div style="text-align: right;padding:10px 14px 0 0">
      <el-select v-model="seatsVal" placeholder="请选择" style="width: 24%" @change="handleSelect">
        <el-option
            v-for="item in seatOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select style="margin-left: 10px;width: 24%" v-model="typeVal" placeholder="请选择" @change="handleSelect">
        <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <profit-bar class="profit-wrapper" :source="source"/>
  </div>
</template>

<script>
import {carAnalysis, getAllSeats} from "@/api/services/dashboard.service";
import profitBar from './profit-bar'
import timePicker from './time-picker'
import moment from "moment";


export default {
  name: "balance",
  components: {profitBar, timePicker},
  data() {
    return {
      source: {
        legendData: [],
        yAxisData: [],
        gathData: [],
        profitData: []
      },
      seatsVal: 0,
      seatOptions: [],
      typeVal: '',
      typeOptions: [
        {label: '营收', value: ''},
        {label: '利润', value: 0},
        {label: '油耗', value: 1},
        {label: '维修', value: 2},
        {label: '过路费', value: 3},
        {label: '停车费', value: 4},
        {label: '工资', value: 5},
        {label: '折旧', value: 6},
        {label: '保费', value: 7},
        {label: '规费', value: 8},
        {label: '里程', value: 9},
      ]
    }
  },
  mounted() {
    this.$nextTick(async () => {
      let params = this.$refs.timeRef.initTime()
      this.getTime(params)
      await this._getAllSeats()
      this.getData()
    })
  },
  methods: {
    handleSelect() {
      this.getData()
    },
    handleChange(data) {
      if (!data) return
      this.getTime(data)
      this.getData()
    },
    _getAllSeats() {
      return getAllSeats({minSeats: 0}).then(res => {
        let result = res.seats.map(item => ({label: Number(item), value: Number(item)}))
        this.seatOptions = result
        this.seatsVal = result[0].value
      })
    },
    _paddZero(data) {
      return data < 10 ? '0' + data : data
    },
    getTime(data) {
      const end = moment(`${data.year}-${data.moment}`, "YYYY-MM").daysInMonth();
      this.stime = `${data.year}-${this._paddZero(data.moment)}-01 00:00:00`
      this.etime = `${data.year}-${this._paddZero(data.moment)}-${end} 23:59:59`
    },
    getData() {
      carAnalysis({
        stime: this.stime,
        etime: this.etime,
        seats: this.seatsVal,
        type: this.typeVal
      }).then(res => {
        let {data} = res
        data = this._paddData(data)

        let lengendLast = this.typeOptions.find(item => item.value === this.typeVal)
        let legendData = ['营收', lengendLast.label]
        let yAxisData = data.map(item => item.plateNum)
        let gathData = []
        let profitData = []
        data.forEach(item => {
          gathData.push(item.gath)
          profitData.push(item.profit)
        })
        this.source = {
          legendData,
          yAxisData,
          gathData,
          profitData,
        }
      })
    },
    _paddData(data) {
      let params = {
        gath: '',
        plateNum: "",
        serviceType: "省际业务"
      }
      let len = data.length
      let number = 30 - len
      let arr = []
      for (let i = 0; i < number; i++) {
        arr.push(params)
      }
      return data.concat(arr)
    }
  }
}
</script>


<style lang="less">
.cus-wrapper {
  .el-select.selectTime {
    width: 70px !important;
  }
}
</style>
<style lang="less" scoped>
.title-wrapper {
  justify-content: space-between;

  .bigTitle {
    border-bottom: none;
    padding: 24px 0 10px 24px;
    color: #3A71A8;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
  }
}

.more {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
}

.profit-wrapper {
  width: 90%;
  margin: 20px auto 0 auto;
  height: 918px;
  overflow: hidden;
  box-sizing: border-box;
  border:1px solid #EBEEF5
}

</style>
